<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import httpInstance from '@/utils/http'

export default {
  name: 'App',
  created() {
    // 添加页面卸载事件
    window.addEventListener('beforeunload', this.handleBeforeUnload)
    window.addEventListener('visibilitychange', this.handleVisibilityChange)
    
    // 页面加载时，检查登录状态
    this.checkLoginStatus()
    
    // 如果是从刷新页面恢复，清除关闭标记
    this.clearClosingFlag()
  },
  destroyed() {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
    window.removeEventListener('visibilitychange', this.handleVisibilityChange)
  },
  methods: {
    // 使用页面可见性API来区分刷新和关闭
    handleVisibilityChange() {
      // 如果页面变为不可见状态，可能是关闭或切换到其他页面
      if (document.visibilityState === 'hidden') {
        // 设置一个标记，表示页面可能即将关闭
        sessionStorage.setItem('_closing', 'true')
      } else if (document.visibilityState === 'visible') {
        // 页面再次可见，清除关闭标记
        this.clearClosingFlag()
      }
    },
    
    // 清除页面关闭标记
    clearClosingFlag() {
      sessionStorage.removeItem('_closing')
    },
    
    // 处理页面关闭事件
    handleBeforeUnload(event) {
      // 检查是否有关闭标记
      const isClosing = sessionStorage.getItem('_closing')
      
      if (isClosing === 'true') {
        // 这可能是真正的关闭操作，执行登出
        this.performLogout()
      } else {
        // 这可能是刷新操作，设置一个标记表示正在刷新
        sessionStorage.setItem('_refreshing', 'true')
      }
    },
    
    // 检查登录状态
    checkLoginStatus() {
      // 如果存在token，说明用户已登录
      const token = localStorage.getItem('token')
      const isRefreshing = sessionStorage.getItem('_refreshing')
      
      if (token) {
        if (isRefreshing === 'true') {
          // 如果是刷新页面，清除刷新标记
          sessionStorage.removeItem('_refreshing')
          console.log('刷新页面，保持登录状态')
        } else {
          console.log('正常加载页面，用户已登录')
        }
      } else {
        console.log('用户未登录或登录已过期')
      }
    },
    
    // 执行登出逻辑
    performLogout() {
      const token = localStorage.getItem('token')
      if (token) {
        console.log('检测到页面关闭，但不执行登出操作')
        // 我们不再在关闭页面时执行登出，只在用户主动点击登出按钮时执行
        
        // 如果真的需要在关闭页面时执行登出，取消下面的注释
        /*
        if (navigator.sendBeacon) {
          const blob = new Blob([JSON.stringify({})], { type: 'application/json' })
          navigator.sendBeacon('/api/user/logout', blob)
        }
        */
      }
    }
  }
}
</script>

<style lang="less">
/* 重置默认样式，避免浏览器默认样式影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
